<!--
 * @Author: yaoling 1871883713@qq.com
 * @Date: 2022-10-20 18:11:21
 * @LastEditors: yaoling 1871883713@qq.com
 * @LastEditTime: 2022-12-12 14:31:40
 * @FilePath: \company-world\src\views\userManagement\index.vue
 * @Description: 用户管理
-->
<template>
  <div class="doc-left-main">
    <header class="left-header">
      <div
        class="box-list"
        v-for="item in tabName"
        :key="item.id"
        :class="activeItem === item.id ? 'active' : ''"
        @click.stop="handleClick(item)"
      >
        <i class="iconfont" :class="item.icon"></i>
        <span class="title">{{ item.name }}</span>
      </div>
    </header>
    <div class="left-body" v-if="activeItem === 1">
      <div class="box-class">
        <span>分类</span>
        <div class="add-type" @click="handleAddType">
          <i class="iconfont icona-xinzengyuanjiao"></i>
        </div>
      </div>
      <el-scrollbar class="sort-main" v-loading="loading">
        <div
          class="box-list"
          v-for="item in typeListData"
          :class="activeTree === item.id ? 'active' : ''"
          :key="item.id"
          @click="clickNode(item)"
        >
          {{ item.type }}
          <el-dropdown size="large">
            <div class="icon-box">
              <i class="iconfont iconbimgis_gengduo"></i>
            </div>
            <template #dropdown>
              <el-dropdown-menu>
                <el-dropdown-item @click="handleRename(item)"
                  ><i class="iconfont iconwangpan-zhongmingming1x"></i>重命名</el-dropdown-item
                >
                <el-dropdown-item divided @click="hadleDelete(item)"
                  ><i style="color: red" class="iconfont iconwangpan-cuohao1x"></i
                  >删除</el-dropdown-item
                >
              </el-dropdown-menu>
            </template>
          </el-dropdown>
        </div>
      </el-scrollbar>
    </div>
    <el-dialog
      v-model="dialogVisible"
      :title="dialogTitile"
      :lock-scroll="false"
      width="50%"
      top="10vh"
      :before-close="handleClose"
    >
      <el-form
        :model="formData"
        label-position="left"
        ref="ruleFormRef"
        :rules="rules"
        class="add-form"
        @submit.prevent=""
        @keydown.enter="handleSubmitAdd"
      >
        <el-form-item v-if="dialogTitile === '新增分类'" prop="type">
          <el-input v-model="formData.type" placeholder="请输入需要增加的分类"></el-input>
        </el-form-item>
        <el-form-item v-if="dialogTitile === '重命名'">
          <el-input v-model="formData.type"></el-input>
        </el-form-item>
      </el-form>
      <footer class="footer">
        <el-button @click="handleClose" class="btn button">关闭</el-button>
        <el-button class="btn" color="#6C52EA" @click="handleSubmitAdd">保存</el-button>
      </footer>
    </el-dialog>
  </div>
</template>

<script lang="ts" setup>
import { reactive, ref, onBeforeUnmount } from 'vue'
import type { FormRules } from 'element-plus'
import { ElMessage, ElMessageBox } from 'element-plus'
import { getTypeList, newTypeData, editTypeData, deleteTypeData } from '@/apis/system/document'

import Bus from '@/utils/bus'

const dialogVisible = ref(false)

const rules = reactive<FormRules>({
  type: [
    { required: true, message: '分类不能为空', trigger: 'blur' },
    { min: 2, max: 10, message: '长度需要在2-20个字符', trigger: 'blur' }
  ]
})

const tabName = ref([
  { id: 1, name: '全部', icon: 'iconquanbu' },
  { id: 2, name: '我的', icon: 'iconrichangpeixunguanli' },
  { id: 3, name: '收藏', icon: 'iconc-star' },
  { id: 4, name: '最近', icon: 'iconrizhi' }
])

/**
 * @desc: 获取分类
 */
let typeListData = ref()
const loading = ref(false)
const getData = () => {
  loading.value = true
  getTypeList()
    .then((res) => {
      if (!res) return
      typeListData.value = res
    })
    .catch(() => {
      ElMessage('服务器内部错误')
    })
    .finally(() => {
      loading.value = false
    })
}

getData()

/**
 * @desc: 展示
 */
const activeItem = ref(1)
const handleClick = (item: { id: number; name: string }) => {
  activeTree.value = 0
  activeItem.value = item.id
  switch (item.name) {
    case '全部':
      Bus.emit('click-show-all', item)
      break
    case '我的':
      Bus.emit('click-show-my', item)
      break
    case '收藏':
      Bus.emit('click-show-like', item)
      break
    case '最近':
      Bus.emit('click-show-recently', item)
      break
  }
}

const activeTree = ref(0)
const clickNode = (res: { id: number }) => {
  console.log(res, 'res@@@')
  activeTree.value = res.id
  Bus.emit('send-click-node', res)
}
/**
 * @desc: 新增分类
 */
const formData = ref({
  type: '',
  _id: 0
})
let dialogTitile = ref<string>()
const handleAddType = () => {
  formData.value.type = ''
  dialogTitile.value = '新增分类'
  dialogVisible.value = true
}

/**
 * @desc: 重命名
 */
const handleRename = (item: { type: string; id: number }) => {
  formData.value = {
    type: item.type,
    _id: item.id
  }
  dialogTitile.value = '重命名'
  dialogVisible.value = true
}

/**
 * @desc: 删除
 */
const hadleDelete = (item: { type: string; id: number }) => {
  ElMessageBox.confirm(`是否删除名为 ${item.type} 分类?`, '提示', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning',
    lockScroll: false
  })
    .then(() => {
      deleteTypeData(item.id)
        .then((res) => {
          if (!res) return
          getData()
        })
        .catch((res) => {
          ElMessage('服务器内部错误')
        })
      ElMessage({
        type: 'success',
        message: '删除成功'
      })
    })
    .catch(() => {
      ElMessage({
        type: 'info',
        message: '已取消'
      })
    })
}

/**
 * @desc: 保存提交
 *
 */
const ruleFormRef = ref()
const handleSubmitAdd = () => {
  ruleFormRef.value.validate((valid: boolean) => {
    if (valid) {
      if (dialogTitile.value === '新增分类') {
        newTypeData(formData.value)
          .then((res) => {
            if (!res) return
            getData()
            ruleFormRef.value.resetFields()
            ElMessage.success(res.msg)
          })
          .catch((res) => {
            ElMessage('服务器内部错误')
          })
      } else {
        editTypeData(formData.value)
          .then((res) => {
            if (!res) return
            getData()
          })
          .catch((res) => {
            ElMessage('服务器内部错误')
          })
      }
      dialogVisible.value = false
      ruleFormRef.value.resetFields()
    }
  })
}

/**
 * @desc: 取消提交
 *
 */
const handleClose = () => {
  dialogVisible.value = false
  ruleFormRef.value.resetFields()
}
</script>

<style lang="less" scoped>
.add-form {
  height: 280px;
  overflow-x: hidden;
  overflow-y: auto;
  padding: 0 15%;
  padding-bottom: 10px;
  box-sizing: border-box;
  border-bottom: 1px solid rgba(220, 223, 230, 1);
}
.footer {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 80px;
  padding-top: 10px;
  text-align: right;
  .btn {
    width: 150px;
    height: 48px;
    opacity: 1;
    border-radius: 4px;
    border: 1px solid rgba(220, 223, 230, 1);
    display: flex;
    justify-content: flex-start;
    align-items: flex-start;
    padding: 15px 61px 15px 61px;
  }
}
.doc-left-main {
  height: 100%;
  display: flex;
  flex-direction: column;
  .left-header {
    height: 170px;
    border-bottom: 1px solid #f1f1f1;
    .box-list {
      padding-left: 30px;
      height: 40px;
      align-items: center;
      cursor: pointer;
      display: flex;
      align-items: center;
      &:hover {
        background: #f0f4fd;
        color: #6c52ea;
        border-radius: 10px;
      }
      .title {
        padding-left: 10px;
      }
    }

    .active {
      background: #f0f4fd;
      color: #6c52ea;
      border-radius: 10px;
    }
  }

  .left-body {
    padding-top: 5px;
    flex-grow: 1;
    height: 0;
    flex-shrink: 0;
    .box-class {
      display: flex;
      justify-content: space-between;
      height: 40px;
      padding-left: 10px;
      line-height: 40px;

      .add-type {
        width: 25px;
        height: 40px;
        cursor: pointer;

        &:hover .iconfont {
          color: #6c52ea;
        }

        .iconfont {
          font-size: 16px;
          line-height: 40px;
        }
      }
    }

    .sort-main{
      height: 100%;
      .box-list {
      display: flex;
      justify-content: space-between;
      padding: 0 10px 0 30px;
      height: 40px;
      align-items: center;
      cursor: pointer;

      &:hover {
        background: #f0f4fd;
        color: #6c52ea;
        border-radius: 10px;
        .el-dropdown{
          opacity: 1;
        }
      }
       .el-dropdown{
        opacity: 0;
      }
    }
    }
 
    .active {
      background: #f0f4fd;
      color: #6c52ea;
      border-radius: 10px;
    }
  }
}
</style>
